<template>
  <div id="lingjuan">
      <div class="box5" v-show="num">
          <p class="w1">!</p>
          <span class="w2">请忽重新领取</span>
      </div>
     <div class="box">
         <img src="../assets/imgs/5.png" alt="">
         <span @click="fanhui">&lt;</span>
     </div>
     <div class="box1">
         <input type="text" name="" id="" placeholder="请输入礼劵码">
         <button>兑换</button>
     </div>
     <div class="box2">
        <ul>
            <li><span class="q1">{{this.list.numberPersonMax}}</span><span class="q2">元</span></li>
            <li>
                <p>{{this.list.name}}</p>
                <p>满{{this.list.needAmount}}使用</p>
            </li>
            <li>
                <button @click="abc">立即领取</button>
            </li>
        </ul>
        <div class="box3">
            <p>领取{{this.list.dateEndDays}}内有效</p>
        </div>
        
     </div>
     <div class="box2">
        <ul>
            <li><span class="q1">{{this.list1.numberPersonMax}}</span><span class="q2">元</span></li>
            <li>
                <p>{{this.list1.name}}</p>
                <p>满{{this.list1.moneyHreshold}}使用</p>
            </li>
            <li>
                <button @click="abc">立即领取</button>
            </li>
        </ul>
        <div class="box3">
            <p>领取{{this.list1.dateEndDays}}内有效</p>
        </div>
        
     </div>
 </div>
</template>

<script>
import '../assets/imgs/5.png'
import { getlingjuan} from '../utils/api'
export default {
  name: '',
  data() { 
    return {
        list:[],
        list1:[],
        num:false
    }
  },
  created() {
       getlingjuan().then(res=>{
          
           this.list=res[0]
            this.list1=res[1]

          
       })
  },
  methods:{
      fanhui(){
          this.$router.go(-1)
      },
      abc(){
         this.num=true
       
         setTimeout(() => {
              this.num=false
         }, 2000);
      }

  },
 }
</script>

<style scoped lang='scss'>
*{
    margin: 0;
    padding: 0;
}
#lingjuan{
    position: relative;
}
.box{
    width: 100%;
    height: 150px;
    // background-color: red;
    position: relative;
    img{
         width: 100%;
    height: 100%;
    position: absolute;
    }
    span{
        position: absolute;
       z-index: 123;
       font-size: 28px;
       top: 10px;
       left: 15px;
    }
   
}
.box1{
    width: 90%;
    height: 65px;
    border: 3px solid #F7D8A1;
    margin: 0 auto; 
    border-radius: 10px;
    display: flex;
  align-items: center;
    input{
        border: 1px solid #FA893D;
        height: 35px;
        width: 220px;
        margin-left: 10px;
        text-align: center;
         border-radius:5px ;
    }
    button{
        height: 35px;
        width: 70px;
        border-radius:5px ;
        background-color: #EE7C7B;
        color: white;
        border: none;
        margin-left: 10px;
        
    }
}
.box2{
   
    width: 90%;
    height: 130px;
    background-color: #EC7877;
    margin: 0 auto;
    border-radius: 10px;
     margin-top: 30px;
     ul{
         list-style: none;
         width: 100%;
         height: 70%;
         display: flex;
         
        color: white;
           
         li:nth-child(1){
             width: 20%;
            height: 80px;
            line-height: 80px;
            //  background-color: yellowgreen;
             margin-right: 10px;
             text-align: center;
             .q2{
                 font-size: 14px;
             }
              .q1{
                font-size: 24px;
                margin-right: 5px;
              }
              
         }
          li:nth-child(2){
             width: 45%;
            line-height: 40px;
              margin-right: 10px;
                height: 80px;
            
            //   background-color: yellowgreen;
         }
          li:nth-child(3){
             width: 25%;
                height: 80px;
            
            //   background-color: yellowgreen;
              button{
                  height: 30px;
                  width: 80px;
                  font-size: 14px;
                  margin-top: 25px;
                  border-radius:5px ;
                  border: none;
                  background-color: #FCE8E7;
              }
             
         }
        
     }
      .box3{
             width: 100%;
             height: 30%;
             background-color: #CC7773;
            border-bottom-left-radius: 10px;
             border-bottom-right-radius: 10px;
             p{
                 width: 100%;
                 height: 40px;
                  line-height: 40px;
                    color: white;
                  
                    margin-left: 5px;
             }
          
         }
}
.box5{
    width: 120px;
    height: 120px;
    background: rgba(12, 12, 10, 0.7);
    position: absolute;
    top: 270px;
    left: 130px;
    text-align: center;
    color: white;
    line-height: 60px;
    border-radius: 10px;
    .w1{
        font-size: 48px;
       
    }
}
</style>